<template>
  <div class="shopcar">
    <van-row
      class="list"
      v-for="(item, index) in $store.state.shoplist"
      :key="item._id"
    >
      <van-col span="4">
        <input type="checkbox" v-model="result" :value="item" @change="check" />
        <!-- 复选框组有相同的v-model 是一个数组 选中的复选框的value值会被放进这个数组中 -->
      </van-col>
      <van-col span="20">
        <van-swipe-cell>
          <van-card :price="item.price" :title="item.title" :thumb="item.pic">
            <template #footer>
              <van-stepper v-model="item.num" @change="changenum" />
            </template>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="remove(index, item._id)"
            />
          </template>
        </van-swipe-cell>
      </van-col>
    </van-row>

    <van-button type="primary" @click="clear">批量删除</van-button>
    <!-- 批量删除的逻辑 是把在result数组中的数据从vuex里的购物车数据中删掉 -->

    <van-submit-bar :price="allprice * 100" button-text="提交订单">
      <van-checkbox v-model="checked" @click="checkall">全选</van-checkbox>
      <!-- 单个的复选框 v-model 的值是一个布尔值 -->
      <!-- 原生的复选框用 change事件 不是原生的复选框用 点击事件 -->
    </van-submit-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      result: [],
    };
  },
  created() {},
  methods: {
    remove(index, id) {
      this.$store.commit("remove", index);
      //通过下标从vuex中把数据删除

      this.result.forEach((item, index) => {
        if (item._id == id) {
          this.result.splice(index, 1);
        }
      });
      //根据id找到下标用下标删除
      // 删除除了从vuex中把数据删掉之外，还要从选中的result中把数据删掉
      this.check();
    },
    check() {
      console.log(this.result);
      if (
        this.result.length == this.$store.state.shoplist.length &&
        this.$store.state.shoplist.length != 0
      ) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    //点击每个商品前面的复选框 判断选中的长度 如果跟购物车数据长度一致 那么全选按钮就被选中，否则就不选中
    checkall() {
      console.log(this.checked);
      if (this.checked == true) {
        this.result = this.$store.state.shoplist;
      } else {
        this.result = [];
      }
    },
    //点击全选/反选按钮 如果是true 那就把整个购物车数据 给result  否则就为【】
    changenum() {
      this.$store.commit("changenum");
    },
    clear() {
      this.$store.commit("clear", this.result);

      this.result = [];
      this.check();
    },
  },
  computed: {
    allprice() {
      let all = 0;
      this.result.forEach((item) => {
        all += item.price * item.num;
      });
      return all;
    },
  },
};
</script>

<style lang="scss">
.list {
  margin-top: 15px;
}
.van-button--danger {
  height: 100%;
}
.shopcar {
  padding-bottom: 80px;
}
</style>
